<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="50%">
    <div class="dialog-main">
      <el-form ref="form" :model="form" size="small" label-width="120px" class="form">
        <el-form-item label="请输入意见：">
          <el-input type="textarea" v-model="form.message" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div class="common-words">
        <div class="title"><el-link type="primary" class="common-words-add" icon="el-icon-plus" :underline="false" @click="addCommonWords">添加</el-link>常用语 </div>
        <div class="list">
          <el-scrollbar style="height: 100%">
            <div class="item" v-for="(item,index) in commonWords" :key="index" @click="form.message = item" :title="item">
              <span>{{ item }}</span>
              <i class="el-icon-close" @click.stop="delCommonWords(item)"></i>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <ApprovalUserListDialog ref="approvalUserListDialog" @confirm="confirm"></ApprovalUserListDialog>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
    import ApprovalUserListDialog from './ApprovalUserListDialog'
    import {complete,jumpToSelectStep} from '@/api/Task'

    export default {
        components: {ApprovalUserListDialog},
      inject: ['getTaskId','getProcessInstanceId'],
        data() {
            return {
                dialogVisible:false,
              type:'',
                form: {
                    message: '',
                    nextNodeId: '123',
                },
                commonWords:[
                    '同意',
                    '情况紧急，请尽快处理！'
                ]
            }
        },
      computed:{
        title(){
            switch (this.type) {
              case 'agree':
                return '同意'
              case 'reject':
                return '退回'
            }
            return ''
        }
      },
        methods: {
            open(type) {
              this.type = type
                this.dialogVisible = true
            },
            submit(){
                if(!this.form.message){
                    this.$message.warning('请输入意见')
                    return
                }
                if(this.type==='agree'){
                  this.$refs.approvalUserListDialog.open('task',{taskId:this.getTaskId()})
                }else {
                  this.$refs.approvalUserListDialog.open('reject',{taskId:this.getTaskId(),processInstanceId:this.getProcessInstanceId()})
                }

            },
            addCommonWords(){
                if(!this.form.message){
                    this.$message.warning('请输入意见')
                    return
                }
                this.commonWords.push(this.form.message)
            },
            confirm(userList,activityId){
              let fun
              if(this.type==='agree') {
                fun= complete(this.getTaskId(), this.form.message, userList, {})
              }else {
                fun=jumpToSelectStep(this.getProcessInstanceId(),this.getTaskId(), activityId,this.form.message, userList, {})
              }
              fun.then(res => {
                this.dialogVisible = false
              }).finally(() => {

              })
            }
        }
    }
</script>

<style scoped lang="scss">
    .dialog-main{
        display: flex;
        .form{
            padding-top: 40px;
            padding-right: 20px;
            flex: 3;
        }
        .common-words {
            flex: 1;
            padding: 5px;
            height: 250px;
            font-size: 12px;
            .title{
                font-size: 18px;
                .common-words-add{
                    margin-right: 10px;
                }
            }
            .list{
                width: 200px;
                border-radius: 4px;
                border: 1px solid #d7dae2;
                margin-top: 10px;
                height: 100%;
                .item{
                    margin: 5px;
                    padding: 5px;
                    font-size: 12px;
                    height: 12px;
                    line-height: 12px;
                    cursor: pointer;
                    position: relative;
                    background-color: #ecf5ff;
                    color: #409eff;
                    border: 1px solid #d9ecff;
                    border-radius: 4px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    &:hover{
                        .el-icon-close{
                            visibility: visible;
                        }
                    }
                    .el-icon-close{
                        cursor: pointer;
                        line-height: 12px;
                        position: absolute;
                        color: #f56c6c;
                        right: 8px;
                        visibility: hidden;
                        &:hover{
                            border-radius: 50%;
                            color: #fff;
                            background-color: #f56c6c;
                        }
                    }
                }
            }
        }

    }
   /deep/ .el-scrollbar__wrap{
        overflow-x: hidden;
    }
</style>
